<!--社区论坛-->
<style>
.el-dialog__title {
  font-family: 黑体;
  font-size: 25px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  line-height: 130px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.nr {
  width: 650px;
  height: 20px;
  position: relative;
  top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  word-wrap: break-word;
}

p {
  text-indent: 2em;
}
.bodyDiv {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>

<template>
  <div class="bodyDiv">
    <el-card style="width: 1300px;height:auto;margin: -19px auto;">
      <div style="width: 1200px;height:auto;margin: 0 auto;padding-top: -5px">
        <el-button-group style="margin: 16px 0 8px 360px;">
          <el-button round :type="showCurrentList==1?'primary':''" icon="el-icon-news" @click="showAllPage1()">最新推荐</el-button>
          <el-button :type="showCurrentList==2?'primary':''" icon="el-icon-star-on" @click="showCollectPage1()">我的收藏</el-button>
          <el-button :type="showCurrentList==3?'primary':''" icon="el-icon-user-solid"  @click="showMyForPage1()">我的论坛</el-button>
          <el-button type="success" round icon="el-icon-upload el-icon--right" @click="addNewDialogVisible()">发布论坛
          </el-button>
        </el-button-group>

        <el-row>
          <!--v-for="i in 4"重复生成4次-->
          <el-col v-for="forum in forumArr">
            <el-card style="height: 160px;margin:4px 0; border-color:#e8e8e8">
              <el-container>
                <!--论坛图片-->
                <el-image v-show="forum.photo<1?false:true"
                     :src="forum.photo<1||forum.photo==null?'':require('../img/user/'+forum.photo)"
                     style="height: 140px;width: 200px;float: left;line-height:20px;
                             margin: -10px 0 0 -6px"></el-image>

                <!--论坛标题-->
                <el-container>
                  <el-header style="margin-top: -15px">
                    <template slot-scope="scope">
                      <el-button type="text" @click="openForumStandard(forum)"
                                 style="font-size: 25px;font-weight: bold;">
                        {{ forum.title }}
                      </el-button>
                      <el-button v-show="forum.auditStatus==0" style="position: relative;top: -5px" size="mini" disabled
                                 type="warning"
                                 icon="el-icon-lock" @click="">待审核
                      </el-button>
                      <el-button v-show="forum.auditStatus==2" style="position: relative;top: -5px" size="mini" disabled
                                 type="danger"
                                 icon="el-icon-lock" @click="">违规
                      </el-button>
                      <el-badge :value="forum.forumCountByLike" style="float: right;position: relative;top: 20px">
                        <el-button @click="forumLike(forum)" type="danger" icon="el-icon-star-on" circle size="small">点赞
                        </el-button>
                      </el-badge>

                      <el-badge :value="forum.forumCountByCollect"
                                style="float: right;position: relative;top: 75px; right: -61px">
                        <el-button @click="forumAddCollect(forum)"
                                   type="warning" icon="el-icon-star-off" circle size="small">收藏
                        </el-button>
                      </el-badge>
                    </template>
                  </el-header>

                  <!--论坛正文-->
                  <el-main style="padding-top: 0;">
                    <div class="nr">
                      <span v-html="forum.content"/>
                    </div>
                    <span style="float: right ;font-size: 12px;position: relative;top: 53px;right: -19px">
                    {{ forum.gmtCreate }}</span>
                    <el-avatar :size="35" shape="circle" :src="require('../img/user/'+forum.userPhoto)"
                               class="avatar" style="top: 14px;position: relative"/>
                    <span style="position: relative;top:32px; left: 5px">{{ forum.username }}</span>
                  </el-main>
                </el-container>
              </el-container>
            </el-card>
          </el-col>
        </el-row>
        <div class="block" align="center" style="margin-top: 15px">
          <el-pagination
              v-show="allForumShow"
              background
              @current-change="handleCurrentChange"
              :current-page.sync="allForum.page"
              :page-size="allForum.pageSize"
              layout="prev, pager, next, jumper"
              :total="this.totalCount">
          </el-pagination>
          <el-pagination
              v-show="collectForumShow"
              background
              @current-change="handleCurrentChange1"
              :current-page.sync="collectForum.page"
              :page-size="collectForum.pageSize"
              layout="prev, pager, next, jumper"
              :total="this.totalCount">
          </el-pagination>
          <el-pagination
              v-show="myForumShow"
              background
              @current-change="handleCurrentChange2"
              :current-page.sync="myForum.page"
              :page-size="myForum.pageSize"
              layout="prev, pager, next, jumper"
              :total="this.totalCount">
          </el-pagination>
        </div>
      </div>
    </el-card>
    <!--  弹出添加论坛的弹框  -->
    <el-dialog  :destroy-on-close="true" @opened="initWangEditor()" title="发布论坛"
               :visible.sync="addNewFormVisible">
      <el-form :model="addNewForm" :rules="rules" ref="addNewForm" label-width="100px" class="demo-ruleForm">
        <el-form-item prop="title" label="标题" :label-width="formLabelWidth">
          <el-input type="textarea" autosize placeholder="请输入标题" maxlength="20" show-word-limit
                    minlength="2" v-model="addNewForm.title">
          </el-input>
        </el-form-item>

        <el-form-item label="正文">
          <div id="wangEditor"></div>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
              :on-remove="handleRemove"
              :limit="1"
              list-type="picture-card"
              class="avatar-uploader"
              action="http://localhost:8080/user/upload"
              :on-success="handleSuccess"
              :before-upload="beforeAvatarUpload">
              <i class="el-icon-plus avatar-uploader-icon"/>
          </el-upload>
        </el-form-item>
        <el-form-item class="formFoot">
          <el-button style="border-radius: 30px" @click="resetForm('addNewForm')">重置</el-button>
          <el-button style="border-radius: 30px" @click="addNewFormVisible = false">取消</el-button>
          <el-button style="border-radius: 30px" type="danger"
                     @click="submitAddNewForm('addNewForm')">发布
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allForumShow: false,
      collectForumShow: false,
      myForumShow: false,
      allForum: {
        pageSize: 4,
        page: 1,
      },
      collectForum: {
        pageSize: 4,
        page: 1,
      },
      myForum: {
        pageSize: 4,
        page: 1,
      },
      editor: {},
      wangShow: 0,
      addNewFormVisible: false,
      formLabelWidth: '75px',
      rules: {
        title: [
          {required: true, message: '请输入论坛标题', trigger: 'blur'},
          {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
        ],
      },
      addNewForm: {
        title: '',
        content: '',
        photo: ''
      },
      showCurrentList: 0,
      forumPhoto: '',
      forumStandard: {},
      forumArr: [],
      totalCount: 0,
      standardFormVisible: false,
    };
  },
  methods: {
    //撤销上传图片
    handleRemove(file, fileList) {
      console.log("需要移除的文件是"+file, fileList);
      console.log("需要移除的uuid值是"+file.response);
      let url = 'http://localhost:8080/user/uploadDelete/uuid=' + file.response;
      console.log('执行图片撤销的请求路径是：'+url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('userJwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$notify.success({
            title: '提示',
            message: '撤销图片成功！',
            showClose: true,
            position: 'top-right'
          });
          this.addNewForm.photo = '';
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-right'
          });
        }
      });
    },

    //展示所有论坛第一页
    showAllPage1() {
      this.allForum.page = 1;
      this.loadForumList();
    },
    //展示收藏论坛第一页
    showCollectPage1() {
      this.collectForum.page = 1;
      this.showMyCollect();
    },
    //展示我的论坛第一页
    showMyForPage1() {
      this.myForum.page = 1;
      this.showMyForum();
    },

    //弹出添加论坛弹框
    addNewDialogVisible() {
      if (localStorage.getItem('userJwt') == '') {
        this.$notify.warning({
          title: '提示',
          message: '请先登录！',
          showClose: true,
          position: 'top-right'
        });
        return;
      }
      this.addNewFormVisible = true;
    },
    //提交添加论坛
    submitAddNewForm(forum) {
      this.$refs[forum].validate((valid) => {
        if (valid) {
          this.addNewForm.content = this.editor.txt.html();

          let formData = this.qs.stringify(this.addNewForm);
          console.log(formData);
          let url = 'http://localhost:8080/forum/insert';
          console.log('添加论坛请求URL = ' + url);

          this.axios.create({'headers': {'Authorization': localStorage.getItem('userJwt')}})
              .post(url, formData).then((response) => {
            let responseBody = response.data;
            if (responseBody.state == 20000) {
              this.$notify.success({
                title: '提示',
                message: "发布论坛成功！",
                showClose: true,
                position: 'top-right'
              });
              this.addNewFormVisible = false;
              this.showMyForum();
            } else {
              this.$notify.warning({
                title: '提示',
                message: responseBody.message,
                showClose: true,
                position: 'top-right'
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //打开高级文本编辑框
    initWangEditor() {
        this.editor = new this.wangEditor('#wangEditor');
        this.editor.config.zIndex = 1;
        this.editor.create();
        console.log('富文本创建完成！');
    },
    handleSuccess(response) {
      console.log(response);
      this.addNewForm.photo = response;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    //展示我发布的论坛
    showMyForum() {
      this.myForumShow = true;
      this.collectForumShow = false;
      this.allForumShow = false;
      let url = 'http://localhost:8080/forum/' + this.myForum.page + '/' + this.myForum.pageSize + '/page/user';
      console.log('我的论坛展示请求的url是' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('userJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.showCurrentList = 3;
          this.forumArr = responseBody.data.list;
          this.totalCount = responseBody.data.totalCount;
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-right'
          });
        }
      })
    },
    //展示我收藏的论坛
    showMyCollect() {
      this.collectForumShow = true;
      this.myForumShow = false;
      this.allForumShow = false;
      let url = 'http://localhost:8080/forum/' + this.collectForum.page + '/' + this.collectForum.pageSize + '/collectList';
      console.log('我的论坛收藏展示请求的url是' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('userJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.showCurrentList = 2;
          this.forumArr = responseBody.data.list;
          this.totalCount = responseBody.data.totalCount;
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-right'
          });
          this.loadForumList();
        }
      })
    },
    //展示论坛列表
    loadForumList() {
      this.showCurrentList = 1;
      this.allForumShow = true;
      this.myForumShow = false;
      this.collectForumShow = false;
      let url = 'http://localhost:8080/forum/page/' + this.allForum.page + '/' + this.allForum.pageSize;
      console.log('论坛展示请求的url是' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('userJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.forumArr = responseBody.data.list;
          this.totalCount = responseBody.data.totalCount;
        } else {
          this.$router.push('/login')
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-right'
          });
        }
      })
    },

    //打开论坛详情弹框
    openForumStandard(forum) {
      localStorage.setItem("forumStandardId", forum.id);
      this.$router.push('forumStandard');
    },

    //执行论坛点赞
    forumLike(forum) {
      let url = 'http://localhost:8080/forum/' + forum.id + '/addLike';
      console.log('给论坛点赞url是' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('userJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.showCurrentForumList();
          this.$notify.success({
            title: '提示',
            message: responseBody.data,
            showClose: true,
            position: 'top-right'
          });
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-right'
          });
          this.showCurrentForumList();
        }
      })
    },

    //执行收藏论坛
    forumAddCollect(forum) {
      let url = 'http://localhost:8080/forum/' + forum.id + '/addCollect';
      console.log('执行收藏论坛请求的url是' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('userJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.showCurrentForumList();
          this.$notify.success({
            title: '提示',
            message: responseBody.data,
            showClose: true,
            position: 'top-right'
          });
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-right'
          });
          this.showCurrentForumList();
        }
      })
    },

    //展示当前列表
    showCurrentForumList() {
      if (this.showCurrentList == 1) {
        this.showCurrentList = 0;
        this.loadForumList();
      } else if (this.showCurrentList == 2) {
        this.showCurrentList = 0;
        this.showMyCollect();
      } else if (this.showCurrentList == 3) {
        this.showCurrentList = 0;
        this.showMyForum();
      }
    },

    //所有论坛当前页
    handleCurrentChange(val) {
      this.allForum.page = val;
      this.showCurrentForumList();
      console.log(`当前页: ${val}`);
    },
    //收藏论坛当前页
    handleCurrentChange1(val) {
      this.collectForum.page = val;
      this.showCurrentForumList();
      console.log(`当前页: ${val}`);
    },
    //我的论坛当前页
    handleCurrentChange2(val) {
      this.myForum.page = val;
      this.showCurrentForumList();
      console.log(`当前页: ${val}`);
    },
    //清空添加输入框
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted() {
    this.loadForumList();
  }
}
</script>

